<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #contents .selected {
        border: thin solid;
    }
    section {
        min-height: 4em;
    }
    #part1 {
        background: #cc9999
    }
    #part2 {
        background: #99cc99
    }
    #part3 {
        background: #9999cc
    }

</style>
<body>


<h1>.data   what's meaning??</h1>


<ul id="contents">
    <li data-link="#part1">Part 1</li>
    <li data-link="#part2">Part 2</li>
    <li data-link="#part3">Part 3</li>
</ul>

<section id="part1"></section>
<section id="part2"></section>
<section id="part3"></section>

</body>


<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>



    $('#contents').on('click', 'li', event => {
        $('#contents li').removeClass('selected');
        $(event.target).addClass('selected');
        const linked = $(event.target).data('link');
        $('section').hide();
        $(linked).show();
    })
</script>
</html>